<template>
  <div class="m-menu">
    <div v-for="(item, i) in menuList" :key="i"
      :class="{ active: activeMenu === i }" @click="onMenuClick(i)">{{item}}</div>
  </div>
</template>

<script>
export default {
  props: {
    menuList: {
      type: 'Array',
      default: ['进行中', '已结束']
    }
  },
  data () {
    return {
      activeMenu: 0
    }
  },
  methods: {
    onMenuClick (i) {
      this.activeMenu = i
      this.$emit('onClick', i)
    }
  }
}
</script>

<style lang="less" scoped>
.m-menu {
  display: flex;
  font-size: 30rpx;
  line-height: 84rpx;
  text-align: center;
  color: #777;
  background-color: #fff;
  & > div {
    flex: 1;
    &:active {
      background: #d8d8d8;
    }
    &.active {
      border-bottom: 2rpx solid #e0382f;
      color: #e0382f;
    }
  }
}
</style>
